<template>
	<div class="page bgc-ebf0f6">
		<mt-header title="出价记录" class="marginBot">
			<router-link to="" slot="left">
				<img class="back" :src="staticImgData.back" @click="$router.back(-1)" alt="">
			</router-link>
		</mt-header>
		<div class="box-con">
			<div class="list-type">{{detailDesti ? detailDesti.inquirySheetNo : ''}}</div>
			<div class="list-address">
				<p>{{detailDesti ? detailDesti.originLocationCity : ''}}</p>
				<div class="img">
					<img class="car" :src="staticImgData.car" alt="">
					<img class="line" :src="staticImgData.line" alt="">
				</div>
				<p>{{detailDesti ? detailDesti.destLocationCity : ''}}</p>
			</div>
			<div class="list-con gap-bottom detail-qua">
				<div class="list-detail">
					<div class="list-text detail-time list-gap">
						<p>商品车数量：</p>
						<div class="list-jump" @click="carList">{{detailDesti ? detailDesti.totalShipCount : ''}}(台)<img class="img-detail" :src="staticImgData.detail" alt=""></div>
					</div>
					<div class="list-text detail-time">
						<p>竞价时间：</p>
						<p>{{detailDesti ? detailDesti.competitionTime : ''}}</p>
					</div>
				</div>
			</div>
			<div v-if="bidRecord.length<=0" class="f14 pad15 c-666 noInfo">
				暂无出价记录
			</div>
			<div v-else	class="list-con gap-bottom" v-for="(item,index) in bidRecord" :key="index">
				<div class="list-mark">
					<p class="list-num">{{index+1}}次出价</p>
					<p class="list-tim">{{item ? item.showTime : ''}}</p>
				</div>
				<div class="list-padding">
					<div class="list-detail list-bid">
						<div class="list-text">
							<p>所出价格：</p>
							<p>{{item ? item.bidPrice : ''}}</p>
						</div>
						<div class="list-text">
							<p>当前排位：</p>
							<p>{{item ? item.currentRanking : ''}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<v-loading v-show="loadingShow"></v-loading>
	</div>
</template>

<script>
	import { Header, Toast } from 'mint-ui'
	import Loading from '@/components/common/loading/loading'
	import * as BidApi from '@/api/bid'
	import * as ThreeStorage from '@/utils/store/token.js'
	export default {
	  name: 'bid-record',
	  data() {
	    return {
	      loadingShow: false,
	      staticImgData: {
	        bg: require('@/assets/image/v1/bid/bg@2x.png'),
	        back: require('@/assets/image/v1/bid/back@2x.png'),
	        car: require('@/assets/image/v1/bid/car@2x.png'),
	        line: require('@/assets/image/v1/bid/line@2x.png'),
	        detail: require('@/assets/image/v1/bid/detail@2x.png')
	      },
	      detailDesti: '', // 始发地、目的地等
	      detailDestiParam: {
	        condition: {
	          queryFlag: '',
	          bidPartyCode: ThreeStorage.getCarInfo().currentFleetId,
	          id: ThreeStorage.getDealListInfo().id// 询价单ID
	        }
	      },
	      bidRecord: '',
	      bidRecordParam: {
	        serviceProviderGid: ThreeStorage.getCarInfo().currentFleetId, // 车队ID
	        inquirySheetId: ThreeStorage.getDealListInfo().id, // 询价单ID
	        priceDetailFlag: 'many'// 查询类型
	      },
	      gmtModified: ''// 竞价时间
	    }
	  },
	  components: {
	    Header,
	    'v-loading': Loading
	  },
	  created() {
	    // 获取始发地等信息
	    this.getDetailDesti()

	    this.getRecord()
	  },
	  methods: {
	    getDetailDesti() {
	      this.loadingShow = true
	      BidApi.getDealList(this.detailDestiParam).then(res => {
	        console.log(res)
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.detailDesti = res.data.records[0]
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    getRecord() {
	      this.loadingShow = true
	      BidApi.getDetailOrRecord(this.bidRecordParam).then(res => {
	        console.log(res)
	        this.loadingShow = false
	        if (res.code === 0) {
	          this.bidRecord = res.data
	        } else {
	          Toast({
	            message: res.message,
	            duration: 1500
	          })
	          this.loadingShow = false
	        }
	      }).catch(res => {
	        this.loadingShow = false
	        Toast({
	          message: res.message || '系统繁忙，请稍候再试',
	          duration: 1500
	        })
	      })
	    },
	    carList() {
	      this.$router.push({ name: 'bid-carList' })
	    }
	  }
	}
</script>

<style scoped>
	@import '../../styles/util.css';
	/* common */
	.page {
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.box-con{
		/* 不要在滑动这margin-top */
		width: 100%;
		height: 100%;
		background: url(../../assets/image/v1/bid/bg@2x.png) center center no-repeat;
	}
	.list-state{
		width: 0.71rem;
		height: 0.3rem;
		text-align: center;
		line-height: 0.3rem;
		color: #fff;
		background: #ff6263;
		border-radius: 0 0 0.05rem 0.05rem;
		float: right;
		margin-right: 0.16rem;
	}
	.list-type{
		margin-top: 46px;
		font-size: 0.17rem;
		text-align: left;
		padding: 0.16rem 0 0 0.16rem;
		color: #fff;
	}
	.list-address{
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0.24rem 0 0.21rem 0;
		font-size: 0.2rem;
		font-weight: bold;
		color: #fff;
	}
	.list-address img{
		width: .2rem;
		height: .3rem;
	}
	.list-con.detail-qua{
		background: #3c92fe;
	}
	.list-mark{
		height: 0.47rem;
		text-align: left;
		border-bottom: 1px solid #eaf0f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0.16rem;
	}
	.list-num{
		font-size: 0.16rem;
		color: #000000;
		font-weight: bold;
	}
	.list-tim{
		font-size: 0.14rem;
		color: #2690fe;
	}
	.list-padding{
		padding: 0.16rem;
	}
	.list-detail{
		padding: 0.16rem;
		border-radius: 0.1rem;
	}
	.list-bid{
		background: #f5f8fa;
	}
	.list-detail .detail-remark{
		text-align: left;
		color: #f9524a;
		font-size: 0.15rem;
		font-weight: bold;
	}
	.list-text.detail-time{
		color: #d5e2ff;
	}
	.list-text{
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 0.14rem;
		padding-bottom: 0.12rem;
		color: #3e3e3e;
	}
	.list-text:nth-child(2){
		padding-bottom: 0;
	}
	.list-jump{
		display: flex;
		align-items: center;
	}
	.img-detail{
		width: .17rem;
		height: .17rem;
		padding-left: 0.15rem;
	}
</style>
